<!-- 话题主页 -->
<template>
  <div class="talk-container">
      <el-card shadow="always" :body-style="	{ padding: '0px' }" class="header">
          <div class="face">
              <img src="@/images/1.png" alt="" width="150px" height="150px">
          </div>
          <div class="title">
              <div class="name">
                  <span>尼康好还是佳能好</span>
              </div>
              <div class="intro">
                  <span>讨论关于尼康和佳能的区别</span>
              </div>
              <el-button type="warning" size="medium" class="butt">发新帖</el-button>
          </div>
      </el-card>
      <div class="main">
          <el-card shadow="always" :body-style="	{ padding: '0px' }" class="content">
              <div class="left" v-for="item in 10" :key="item">
                  <div class="con-title">
                      <router-link to="/home/talkcon"><span>佳能调色技巧</span></router-link>
                     
                  </div>
                  <div class="con-main">
                      <img src="@/images/2.png" alt="" width="30px" height="30px">
                      <span id="author">ice摄影师</span>
                      <span id="time">1月20日</span>
                      <span id="back">122回复</span>
                  </div>
                   
              </div>
              <div class="fenye" style="text-align:center;margin:80px auto;">
        <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>
      </div>
            
          </el-card>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },

  methods: {}
}

</script>
<style lang='scss' scoped>
.talk-container{
    margin:20px 300px;
    width: 60%;
    .header{
        height:200px;
        
        .face{
            float:left;
            width:150px;
            height:200px;
            display: flex;
            align-items: center;
            margin:0 50px;
        }
        .title{
            padding:50px 0;
            .name{
                font-size: 30px;
    letter-spacing: 3px;
            }
            .intro{
                font-size: 16px;
                letter-spacing: 2px;
                padding:50px 0;
                
            }
            .butt{
                  
                    float: right;
    right: 50px;
    bottom: 120px;
    width: 200px;
    font-size: 20px;
    line-height: 40px;
    letter-spacing: 3px;
                }
        }
    }
    .main{
        width:100%;
        height: auto;
        margin: 20px auto; 
        .left{
            width:100%;
            height: 100px;
            border:1px solid #eee;
            .con-title{
                margin-left:20px;
                   margin-top: 20px;
    font-size: 20px;
    letter-spacing: 2px;
            }
            .con-main{
                margin-left:20px;
                margin-top: 15px;
                display: flex;
                align-items: center;
                #author{
                    margin-left:20px;
                    font-size:16px;
                    letter-spacing: 1.5px;
                }
                #time{
                    margin-left:20px;
                    font-size:16px;
                    letter-spacing: 1.5px;
                }
                #back{
                    margin-left:20px;
                    font-size: 14px;
                    letter-spacing: 1.5px;
                    color:#909399;
                }
            }
        }
    }
}
</style>